<template>
  <div class="_wz_vehiclePortraitDetails">
    <Row style="height: 100%;">
      <Col span="10" style="height: 100%;">
        <div class="bannerBox">
          <div class="swiper-container gallery-top">
            <div class="swiper-wrapper" v-if="bigImg.length > 0">
              <viewer class="swiper-slide" v-for="(item,index) of bigImg" :key="index">
                <img :src="item.img" @error="public.imgDispose">
              </viewer>
            </div>
          </div>
          <div style="height: 15px;width: 400px;"></div>
          <div class="swiper-container gallery-thumbs">
            <div class="swiper-wrapper" v-if="bigImg.length > 0">
              <div class="swiper-slide swiper-bottom" v-for="(item,index) of bigImg" :key="index">
                <img :src="item.img" @error="public.imgDispose">
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </Col>
      <Col span="9" style="height: 100%;display: flex;justify-content: center;align-items: center;">
        <div class="_wz_vehicleDetails">
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">车牌号</span>
            <span class="_wz_vehicleDetailsList_value">

              <!--蓝色-->
              <template v-if="seeCarData.carPlateColor == 1">
                <Tag color="primary"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--黄色-->
              <template v-else-if="seeCarData.carPlateColor == 2">
                <Tag color="warning"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--黑色-->
              <template v-else-if="seeCarData.carPlateColor == 3">
                <Tag color="#515a6e"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--白色-->
              <template v-else-if="seeCarData.carPlateColor == 4">
                <Tag color="default"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--绿色-->
              <template v-else-if="seeCarData.carPlateColor == 5">
                <Tag color="success"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--黄绿色-->
              <template v-else-if="seeCarData.carPlateColor == 93">
                <Tag color="#8ebe19"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--其他-->
              <template v-else-if="seeCarData.carPlateColor == 9">
                <Tag color="blue"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>
              <!--未获取颜色-->
              <template v-else>
                <Tag color="blue"><span @click="$emit('details', '车辆详情')" style="display: block;cursor: pointer;">{{!!seeCarData.carPlateNo?seeCarData.carPlateNo:'--'}}</span></Tag>
              </template>

            </span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">车辆品牌</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.vehicleBrand?seeCarData.vehicleBrand:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">发动机号</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.vehicleEngineNo?seeCarData.vehicleEngineNo:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">车架号</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.frameNo?seeCarData.frameNo:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">燃料类型</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.fuelType?seeCarData.fuelType:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">运输类型</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.deptTypeName?seeCarData.deptTypeName:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">运输企业</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.deptName?seeCarData.deptName:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">联系人</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.vehicleOwnerName?seeCarData.vehicleOwnerName:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
          <div class="_wz_vehicleDetailsList">
            <span class="_wz_vehicleDetailsList_round"></span>
            <span class="_wz_vehicleDetailsList_title">联系电话</span>
            <span class="_wz_vehicleDetailsList_value">{{!!seeCarData.vehicleOwnerPhone?seeCarData.vehicleOwnerPhone:'--'}}</span>
            <div style="clear: both;"></div>
          </div>
        </div>
      </Col>

      <Col span="5" style="height: 100%;display: flex;justify-content: space-between;align-items: center;flex-direction: column;padding: 30px 0;">
        <div class="_wz_maintenanceData" @click="$emit('details', '车辆保险')">
          <div class="_wz_maintenanceData_img">
            <template v-if="!!maintenance">
              <template v-if="!!maintenance.insuranceRecord">
                <template v-if="maintenance.insuranceRecord.insuranceExpireState == 0">
                  <img src="../../assets/icon_baoxian_hs.png" @error="public.imgDispose" />
                </template>
                <template v-else-if="maintenance.insuranceRecord.insuranceExpireState == 1">
                  <img src="../../assets/icon_baoxian_l.png" @error="public.imgDispose" />
                </template>
                <template v-else>
                  <img src="../../assets/icon_baoxian_J.png" @error="public.imgDispose" />
                </template>
              </template>
              <template v-else>
                <img src="../../assets/icon_baoxian.png" @error="public.imgDispose" />
              </template>
            </template>

          </div>
          <div class="_wz_maintenanceData_name">
            <div>保险机务</div>
            <div>
              <template v-if="!!maintenance.insuranceRecord">
                {{!!maintenance.insuranceRecord.insuranceExpireDate?maintenance.insuranceRecord.insuranceExpireDate:'--'}}
              </template>
              <template v-else>--</template>
            </div>
          </div>
        </div>
        <div class="_wz_maintenanceData" @click="$emit('details', '车辆年检')">
          <div class="_wz_maintenanceData_img">
            <template v-if="!!maintenance">
              <template v-if="!!maintenance.annualInspectRecord">
                <template v-if="maintenance.annualInspectRecord.annualInspectExpireState == 0">
                  <img src="../../assets/icon_nianjian_hs.png" @error="public.imgDispose" />
                </template>
                <template v-else-if="maintenance.annualInspectRecord.annualInspectExpireState == 1">
                  <img src="../../assets/icon_nianjian.png" @error="public.imgDispose" />
                </template>
                <template v-else>
                  <img src="../../assets/icon_nianjian_J.png" @error="public.imgDispose" />
                </template>
              </template>
              <template v-else>
                <img src="../../assets/icon_nianjian_h.png" @error="public.imgDispose" />
              </template>
            </template>
          </div>
          <div class="_wz_maintenanceData_name">
            <div>年检机务</div>
            <div>
              <template v-if="!!maintenance.annualInspectRecord">
                {{!!maintenance.annualInspectRecord.annualInspectExpireDate?maintenance.annualInspectRecord.annualInspectExpireDate:'--'}}
              </template>
              <template v-else>--</template>
            </div>
          </div>
        </div>
        <div class="_wz_maintenanceData" @click="$emit('details', '车辆维保')">
          <div class="_wz_maintenanceData_img">
            <template v-if="!!maintenance">
              <template v-if="!!maintenance.maintainRecord">
                <template v-if="maintenance.maintainRecord.maintainExpireState == 0">
                  <img src="../../assets/icon_weibao_hs.png" @error="public.imgDispose" />
                </template>
                <template v-else-if="maintenance.maintainRecord.maintainExpireState == 1">
                  <img src="../../assets/icon_weibao.png" @error="public.imgDispose" />
                </template>
                <template v-else>
                  <img src="../../assets/icon_weibao_J.png" @error="public.imgDispose" />
                </template>
              </template>
              <template v-else>
                <img src="../../assets/icon_weibao_h.png" @error="public.imgDispose" />
              </template>
            </template>
          </div>
          <div class="_wz_maintenanceData_name">
            <div>维保机务</div>
            <div>
              <template v-if="!!maintenance.maintainRecord">
                {{!!maintenance.maintainRecord.maintainExpireDate?maintenance.maintainRecord.maintainExpireDate:'--'}}
              </template>
              <template v-else>--</template>
            </div>
          </div>
        </div>
        <div class="_wz_maintenanceData" @click="$emit('details', '车辆营运')">
          <div class="_wz_maintenanceData_img">
            <template v-if="!!maintenance">
              <template v-if="!!maintenance.operationCertificateRecord">
                <template v-if="maintenance.operationCertificateRecord.operationCertificateExpireState == 0">
                  <img src="../../assets/icon_yingyun_hs.png" @error="public.imgDispose" />
                </template>
                <template v-else-if="maintenance.operationCertificateRecord.operationCertificateExpireState == 1">
                  <img src="../../assets/icon_yingyun.png" @error="public.imgDispose" />
                </template>
                <template v-else>
                  <img src="../../assets/icon_yingyun_J.png" @error="public.imgDispose" />
                </template>
              </template>
              <template v-else>
                <img src="../../assets/icon_yingyun_h.png" @error="public.imgDispose" />
              </template>
            </template>
          </div>
          <div class="_wz_maintenanceData_name">
            <div>营运机务</div>
            <div>
              <template v-if="!!maintenance.operationCertificateRecord">
                {{!!maintenance.operationCertificateRecord.operationCertificateExpireDate?maintenance.operationCertificateRecord.operationCertificateExpireDate:'--'}}
              </template>
              <template v-else>--</template>
            </div>
          </div>
        </div>
        <div class="_wz_maintenanceData" @click="$emit('details', '车辆北斗')">
          <div class="_wz_maintenanceData_img">
            <template v-if="!!maintenance">
              <template v-if="!!maintenance.terminalRecord">
                <template v-if="maintenance.terminalRecord.terminalExpireState == 0">
                  <img src="../../assets/icon_beidou_hs.png" @error="public.imgDispose" />
                </template>
                <template v-else-if="maintenance.terminalRecord.terminalExpireState == 1">
                  <img src="../../assets/icon_beidou.png" @error="public.imgDispose" />
                </template>
                <template v-else>
                  <img src="../../assets/icon_beidou_J.png" @error="public.imgDispose" />
                </template>
              </template>
              <template v-else>
                <img src="../../assets/icon_beidou_h.png" @error="public.imgDispose" />
              </template>
            </template>
          </div>
          <div class="_wz_maintenanceData_name">
            <div>北斗机务</div>
            <div>
              <template v-if="!!maintenance.terminalRecord">
                {{!!maintenance.terminalRecord.terminalExpireDate?maintenance.terminalRecord.terminalExpireDate:'--'}}
              </template>
              <template v-else>--</template>
            </div>
          </div>
        </div>

      </Col>
    </Row>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import {Swiper, swiperSlide} from 'vue-awesome-swiper'

export default {
  props: ['seeCarData'],//接收来自父组件的数据
  components: {
    Swiper,
    swiperSlide
  },
  data() {
    return {
      maintenance:{},
      bigImg: [
        // {name: '车头照片', img: '../../static/img/zwtpxd.png'},
        // {name: '行驶证照片', img: '../../static/img/zwtpxd.png'},
        // {name: '营运证照片', img: '../../static/img/zwtpxd.png'},
        // {name: '备用', img: '../../static/img/zwtpxd.png'},
      ],
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.bigImg = [
      {name: '车头照片', img: !!that.seeCarData.vehicleImg?that.apiUrl.imgUrl +that.seeCarData.vehicleImg:'../../static/img/zwtpxd.png'},
      {name: '行驶证照片', img: !!that.seeCarData.vehicleLicenseImg?that.apiUrl.imgUrl +that.seeCarData.vehicleLicenseImg:'../../static/img/zwtpxd.png'},
      {name: '营运证照片', img: !!that.seeCarData.vehicleOperationCertificateImg?that.apiUrl.imgUrl +that.seeCarData.vehicleOperationCertificateImg:'../../static/img/zwtpxd.png'},
      // {name: '备用', img: !!that.seeCarData.vehicleImg?that.apiUrl.imgUrl +that.seeCarData.vehicleImg:'../../static/img/zwtpxd.png'},
    ];
    that.$nextTick(function () {
      that.galleryThumbsLunbo();
      that.galleryTopLunbo();
      that.maintenanceFun();
   });

  },
  methods: {//执行的方法
    maintenanceFun(){
      var that = this;
      //车辆修改详情
      that.axios.post(that.apiUrl.webApi + "/vehiclePortrait/maintenance", {carPlateNo: that.seeCarData.carPlateNo,carPlateColor: that.seeCarData.carPlateColor}).then(res => {
        if (!!res) {
          that.maintenance = !!res.data.data?res.data.data:{};
        }
      }).catch(err => {
        console.log("失败", err)
      })

    },
    galleryThumbsLunbo() {
      this.galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 15,    //在slide之间设置距离（单位px）
        slidesPerView: 3,    //设置slider容器能够同时显示的slides数量
        loop: true,        //设置为true 则开启loop模式
        freeMode: true,    //默认为false，普通模式：slide滑动时只滑动一格
        loopedSlides: 7,    //一般设置大于可视slide个数2个即可
        watchSlidesVisibility: true,   //开启watchSlidesVisibility选项前需要先开启watchSlidesProgress
        watchSlidesProgress: true,   //开启这个参数来计算每个slide的progress(进度、进程)
      });
    },
    galleryTopLunbo() {
      this.galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 0,
        loop: true,
        loopedSlides: 5,
        // 左右按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        thumbs: {        //thumbs组件专门用于制作带缩略图的swiper
          swiper: this.galleryThumbs,
          slideThumbActiveClass: 'swiper-slide-thumb-active',
        },
      });
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_vehiclePortraitDetails {
  height: 100%;
  background: #454a5d;
  color: #fff;


  .bannerBox {
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;



    .gallery-top {
      width: 100%;
      height: 250px;
      border-radius: 8px;
      background: #383c4e;
      .swiper-slide{
        display: flex;
      }

      img{
        display: block;
        margin: auto;
        max-width: 80%;
        max-height: 80%;
        min-width: 30%;
        min-height: 30%;
      }

    }

    .gallery-thumbs {
      width: 100%;
      height: 100px;
      .swiper-bottom{
        filter: grayscale(100%);
        img{
          width: 100%;
          height: calc(100% - 30px);
        }
        div{
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
      }

    }

    .swiper-slide-thumb-active {
      border-radius: 4px;
      filter: grayscale(0)!important;
    }



  }

  ._wz_vehicleDetails {
    background: rgb(56, 60, 78);
    border-radius: 15px;
    color: rgb(255, 255, 255);
    padding: 20px;
    width: 100%;
    height: 380px;
    line-height: 34px;

    ._wz_vehicleDetailsList {
      ._wz_vehicleDetailsList_round {
        background: rgb(92, 93, 101);
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        float: left;
        margin: 12px 0px;
      }

      ._wz_vehicleDetailsList_title {
        margin: 0px 10px;
        width: 100px;
        display: inline-block;
        float: left;
      }

      ._wz_vehicleDetailsList_value {
        margin: 0px 10px;
        display: inline-block;
        width: calc(100% - 150px);
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  ._wz_maintenanceData{
    display: flex;
    width: 100%;
    padding: 15px 10px 15px 27px;
    cursor: pointer;

    ._wz_maintenanceData_img{
      width: 40px;
      height: 40px;
      margin: 0 10px 0 0;
      img{
        width: 100%;
        height: 100%;
      }
    }
    ._wz_maintenanceData_name{
      div{

      }
    }
  }
}
</style>
